<template>
  <!--  展示 右则边栏 VIP 赞助人头像 -->
  <div class="aside sponsor" v-if="sponsors" style="background-color: #FFFFFF;">
    <el-divider>VIP 赞助人</el-divider>
    <span v-for="sponsor in sponsors" :key="sponsor.id">
        <nuxt-link :to="'/user/'+sponsor.userId">
          <img class="sponsor-avatar" :src="sponsor.avatar" alt="" lazy/>
        </nuxt-link>
    </span>
  </div>
</template>
<script>
export default {
  name: "sponsor",
  props: ["sponsors"]
}
</script>

<style scoped lang="less">

.aside{
  border-radius: 4px;
}

/* 修改则边栏标题横线颜色 */
.el-divider{
  background-color: #2b2b2b;
}

// VIP赞助人
.sponsor {
  float: left;
  margin-bottom: 20px;
  padding-bottom: 20px;
  text-align: center;

  span {
    display: inline-block;
    padding: 4px;

    a {
      // VIP赞助人头像
      .sponsor-avatar {
        width: 40px;
        height: 40px;
        padding: 2px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        object-fit: cover;
      }

      .sponsor-avatar:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }
    }
  }
}

</style>
